.tag-stream__header {
	display: flex;
	flex-direction: column;

	&.has-back-button {
		margin-top: -27px;
	}
}

.tag-stream__header-follow {
	display: flex;
	justify-content: flex-end;
	min-height: 20px;
}

.tag-stream__header .follow-button {
	z-index: z-index( '.tag-stream__header-follow', '.follow-button' );

	@include breakpoint-deprecated( '<660px' ) {
		margin: 12px 20px 0 15px;
	}
}

.tag-stream__header .follow-button__label {

	@include breakpoint-deprecated( '<660px' ) {
		display: inline;
	}
}

.tag-stream__header-image {
	background: var( --color-neutral-0 );
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right center;
	box-sizing: content-box;
	display: flex;
	flex-direction: column;
	min-height: 120px;
	margin-top: 15px;
	padding: 10px;
	position: relative;
	z-index: 0;

	&::before {
		content: '';
		background: rgba( 0, 0, 0, 0.3 );
		height: 100%;
		position: absolute;
			bottom: 0;
			left: 0;
		width: 100%;
		z-index: 1;
	}
}

.tag-stream__header-image .gridicon.gridicons-tag {
	fill: var( --color-text-inverted );
	position: relative;
		right: 6px;
		top: 3px;
	z-index: 2;
}

.tag-stream__header-image-title {
	color: var( --color-text-inverted );
	font-size: 28px;
	line-height: 1.3;
	margin-top: 42px;
	text-align: center;
	text-shadow: 0 1px rgba( 0, 0, 0, 0.3 );
	z-index: 2;
}

.tag-stream__header-image-byline {
	color: var( --color-text-inverted );
	font-size: $font-body-extra-small;
	font-weight: 600;
	padding-top: 24px;
	text-align: right;
	text-shadow: 0 1px rgba( 0, 0, 0, 0.3 );
	z-index: 2;
	-webkit-font-smoothing: antialiased;
}

.tag-stream__header-image-byline-label {
	opacity: 0.7;
}

.tag-stream__header-image-byline-link,
.tag-stream__header-image-byline-link:visited {
	color: var( --color-text-inverted );
	opacity: 0.9;
}

.tag-stream__header-image-byline-link:hover {
	color: var( --color-text-inverted );
}

// Back button in Tag streams
.is-reader-page .card.header-cake {
	background: none;
	box-shadow: none;
	padding: 0;
	position: relative;
		left: -3px;
		top: 8px;

	@include breakpoint-deprecated( '<660px' ) {
		left: 13px;
		top: 20px;
	}

	@include breakpoint-deprecated( '<480px' ) {
		top: 14px;
	}

	.button.header-cake__back {
		padding: 0;
	}
}

.is-reader-page .main .tag-stream__empty-content {
	margin-top: 15px;
}
